<template>
  <div class="scroll-content">

    <a-typography>
      <a-typography-title class="headline">
        <span class="accent">演示</span> 数据库操作</a-typography-title>

      <a-typography-paragraph>
        Electron可以用多种数据库开发，JsonDB、NeDB（类MongoDB）、Sqlite3，可根据实际场景引入。
      </a-typography-paragraph>


      <a-typography-title :level="5">前端(浏览器)操作本地存储数据</a-typography-title>
      <a-typography-paragraph>
        前端依托<b>store2</b>库操作本地存储<b>LocalStorage</b>，无需写IPC，数据长期保存，卸载软件后数据丢失。
      </a-typography-paragraph>

      <a-typography-paragraph>
        <a-space :size="5">
          <a-button type="default" @click="readLocalstorage" shape="round">查看内容</a-button>
          <a-button type="default" @click="setLocalstorage" shape="round">写入内容</a-button>
          <a-button type="dashed" @click="clearLocalstorage" shape="round">清空内容</a-button>
          <block v-if="localStorage != null"> {{ localStorage }} </block>
        </a-space>
       
      </a-typography-paragraph>

      <a-typography-title :level="5">依托Electron主控端操作 JsonDB 数据</a-typography-title>
      <a-typography-paragraph>
        由于EE框架4.0 移除了原json相关方法，当前引入了electron-store 6.0库操作Json数据。
      </a-typography-paragraph>
      <a-typography-paragraph>
        <a-space :size="5">
          <a-button type="dashed" @click="readConfig" shape="round">读取settings参数信息</a-button>
        </a-space>
      </a-typography-paragraph>

      <blockquote v-if="records != null"> {{ records }} </blockquote>


      <div style="width: 520px; margin-bottom: 10px">
        <a-input-group compact>
          <a-input v-model:value="formData.name" placeholder="姓名" style="width: calc(50% - 120px)"
            addon-before="name" />
          <a-input v-model:value="formData.age" placeholder="年龄" style="width: calc(50% - 120px)" addon-before="age" />         
          <a-button type="primary" @click="setConf">更新&新增</a-button>
        </a-input-group>
      </div>
      <div style="width: 520px; margin-bottom: 10px">
        <a-input-group compact>
          <a-input v-model:value="formData.key" placeholder="比如：name 或 age"
            style="width: calc(80% - 100px)" addon-before="输入键名" />
          <a-button type="primary" @click="getConfig">读取参数</a-button>
        </a-input-group>
      </div>

      <div style="width: 520px; margin-bottom: 10px">
        <a-input-group compact>
          <a-input :value="formData.key" @input="handleInput('key', $event)" placeholder="比如：name 或 age"
            style="width: calc(80% - 100px)" addon-before="输入键名" />
          <a-button type="primary" @click="delConf">清除参数</a-button>
        </a-input-group>
      </div>

    </a-typography>
  </div>
</template>

<script setup>
import { ipcApiRoute } from "@/api/main";
import { ipc, isEE } from "@/utils/ipcRenderer";
import { message } from "ant-design-vue";


import storage from "store2";
import { onMounted, ref } from "vue";

const localStorage = ref("LocalStorage: -");
const records = ref("JsonDB: -");

const formData = ref({ name: "老吴", age: 24, sex: "男", key: "age" });


message.config({
  top: "120px",
  duration: 1,
  maxCount: 4,
});

onMounted(() => {
  init();
});

const init = () => {
  // checkHttpServer();
  // readMachineId();
};

const handleInput = (key, event) => {
  formData.value[key] = event.target.value;
};

const readLocalstorage = () => {
  localStorage.value = storage.getAll();
};
const clearLocalstorage = () => {
  message.success("清理本地缓存");
  storage.clear(false);
  localStorage.value = storage.getAll();
};
const setLocalstorage = () => {
  //浏览器端存储
  storage.set("demo", { name: "张三", age: 34, sex: "男" });
  localStorage.value = storage.getAll();
};

const setConf = () => {
  const params = {
    info: {
      name: formData.value.name,
      age: formData.value.age,
    },
  };
  if (parseInt(formData.age).length == 0) {
    message.info("请填写年龄", 2);
    return;
  }
  if (isEE) {
    ipc.invoke(ipcApiRoute.config.set, params).then((res) => {    
      message.info("更新成功！", 1);
      records.value ="";
      ipc.invoke(ipcApiRoute.config.getConf).then((res) => {
        console.log("getConf:", res);
        records.value += " \n " + res;
      });
    });
  } else {
    message.error("开发模式无法操作数据库");
  }
};
const delConf = () => {
  if (
    formData.value.key == "" ||
    formData.value.key == null ||
    formData.value.key === ""
  ) {
    message.info("请填写键名", 2);
    return;
  }

  if (isEE) {
    ipc.invoke(ipcApiRoute.config.delete, formData.value.key).then((res) => {
      console.log("icp res:", res);
      records.value = res;
      message.info("删除完成！", 1);
    });
  } else {
    message.error("开发模式无法操作数据库");
  }
};
const getConfig = () => {
  if (isEE) {
    console.log("get:", formData.value.key);
    ipc.invoke(ipcApiRoute.config.get, formData.value.key).then((res) => {
      console.log("icp res:", res);
      records.value = res || "无此键名数据";
    });
  } else {
    message.error("开发模式无法操作数据库");
  }
};
const readConfig = () => {
  if (isEE) {
    ipc.invoke(ipcApiRoute.config.getPath).then((res) => {
      console.log("getPath:", res);
      records.value = res;
      ipc.invoke(ipcApiRoute.config.getConf).then((res) => {
        console.log("getConf:", res);
        records.value += " \n " + res;
      });
    });
  } else {
    message.error("开发模式无法操作数据库");
  }
};

</script>

<style lang="less" scoped>
.scroll-content {
  height: 100%;
  margin-right: 5px;
  font-weight: 400;
  padding: 10px 30px 30px 20px;
  box-sizing: border-box;
  overflow: auto;
}

@media (min-width: 960px) and (max-width: 1299px) {
  .scroll-content {
    padding: 20px 40px 30px 30px;
  }
}

@media (min-width: 1300px) {
  .scroll-content {
    padding: 30px 50px 30px 50px;
  }
}

.scroll-content::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 10px;
}

.scroll-content::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  border: 2px solid #ffffff;
}

.scroll-content::-webkit-scrollbar {
  width: 10px;
}

html:not(.dark) .accent,
.dark .headline {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sysinfo {
  max-width: 600px;
  width: 50%;
  color: #00770b;
  line-height: 1.4;
  float: right;
  padding: 10px;
  word-wrap: break-word;
}

p {
  line-height: 1.8;
  margin-top: 10px;
}

.headline {
  font-size: 32px;
  line-height: 1.9;
  font-weight: bold;
  letter-spacing: -1.5px;
  margin: 0px auto;
}

.subtitle {
  line-height: 1.5;
  color: var(--vt-c-text-2);
  transition: color 0.5s;
  font-size: 22px;
  margin: 44px auto 16px;
}

.actions a,
.actions .btn {
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  background-color: var(--vt-c-bg-mute);
  padding: 6px 16px;

  font-weight: 500;
  border-radius: 30px;
  transition:
    background-color 0.5s,
    color 0.5s;
  text-decoration: none;
}

.actions .btn {
  margin: 0px 8px 8px 0px;
  text-align: center;
  color: var(--vt-c-text-code);
  border: 0px;
  cursor: pointer;
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
}

.actions .btn:hover {
  background-color: var(--vt-c-gray-light-4);
  transition-duration: 0.2s;
}
</style>